<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./axios.min.js"></script>
    <style>
      .p-list img {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <h1>首页</h1>
    <div id="login-tip"><span>xxx</span>您好</div>

    <form method="get">
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <button id="send">发布商品</button>
    </form>
    <ul class="p-list">
      <!-- <li>
        <h2></h2>
        <p></p>
        <p></p>
        <img src="" alt="" />
      </li> -->
    </ul>
    <script>
      let username = localStorage.getItem("username");
      if (username) {
        document.querySelector("#login-tip span").innerHTML = username;
      } else {
        document.querySelector("#login-tip span").innerHTML = "游客";
      }

      addProduct();
      loadProductList();

      // 添加商品
      function addProduct() {
        /* 
          用户点击发布按钮的时候 输入框的值， 调用发布接口
        */
        // document.forms[0].onsubmit = function (e) {
        //   console.log("发布");
        //   e.preventDefault();
        // };
        let btn = document.querySelector("#send");
        btn.onclick = function (e) {
          console.log("发布");
          // 输入框的值
          let ipts = document.forms[0].querySelectorAll("input");
          let fd = new FormData();
          fd.append("pname", ipts[0].value);
          fd.append("pimg", ipts[1].value);
          fd.append("pprice", ipts[2].value);
          fd.append("pdesc", ipts[3].value);
          let id = localStorage.getItem("id");
          fd.append("uid", id);
          let addProductAPI =
            "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
          axios.post(addProductAPI, fd).then((r) => {
            console.log(r.data);
            //发布成功以后 刷新 商品列表
            loadProductList();
          });

          e.preventDefault();
          return false;
        };

        /*  接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
         接口请求方式：get
         接口参数：
        1.
    pimg 2.
    pname 3.
    pprice 4.
    pdesc 5.
    uid （可选）用户id

         使用方式  post 请求，参数在请求体 */
      }

      // 商品列表
      async function loadProductList() {
        //     品列表接口
        // 所有商品接口
        // get
        // 参数
        // pagesize  每页获取几个数据
        // pagenum 获取第几页数据
        // uid  用户id
        // http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4
        let productListAPI =
          "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
        let pagesize = 20;
        let pagenum = 0;
        let uid = localStorage.getItem("id");
        let res = await axios.get(productListAPI, {
          params: { pagenum, pagesize, uid },
        });
        console.log(res.data); //服务器返回的数据
        let productArr = res.data.data;
        //拼字符串
        let html = "";
        productArr.forEach((pObj) => {
          html += `<li>
                    <h2>${pObj.pname}</h2>
                    <p>${pObj.pprice}</p>
                    <p>${pObj.pdesc}</p>
                    <img src="${pObj.pimg}" alt="" />
                    <button onclick="delClick(this,${pObj.pid})">删除</button>
                    <a href="update.html?pid=${pObj.pid}">修改</a>
                  </li>`;
        });
        document.querySelector(".p-list").innerHTML = html;
      }

      // 删除商品
      async function delClick(btn, pid) {
        console.log("delClick");
        console.log(btn);
        console.log(pid);
        /* 
         接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
         接口请求方式：get
         接口参数：

                pid（必选）商品的id
                uid（必选）用户的id
                 token（必选）登陆时候返回的token

                  使用方式
                 http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459

         服务器返回json数据
        */
        let deleteProductAPI =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
        let uid = localStorage.getItem("id");
        let token = localStorage.getItem("token");
        let params = { uid, token, pid };
        let res = await axios.get(deleteProductAPI, { params });
        console.log(res.data);
        // 删除页面元素
        console.log(btn.parentNode);
        btn.parentNode.remove();
      }
      // 修改商品
    </script>
  </body>
</html>
